<template>
    <el-container class="txl-wrapper">
        <!-- 左侧部门树结构 -->
        <el-aside class="txl-left-wrapper" width="350px;">
            <div class="txl-left-tool">
                <!-- <transition name="bounce">
                    <input class="searchInput" ref="queryInput" v-show="showSearchInput" v-on:blur="showSearchInput = false" type="text" placeholder="请输入用户名或单位名" v-model="searchText" />
                </transition>
                <i class="el-icon-search" @click.prevent="queryBtnClick" title="查询用户名或单位名"></i> -->
                <el-input placeholder="请输入用户名或单位名" v-model="searchText" size="mini">
                    <!-- <el-select v-model="querySelect" slot="prepend" placeholder="请选择" style="width: 75px;">
                        <el-option label="用户" value="user"></el-option>
                        <el-option label="机构" value="sys"></el-option>
                    </el-select> -->
                    <el-button slot="append" icon="el-icon-search" type="primary" style="width: 30px;"></el-button>
                </el-input>
            </div>
            <el-tree ref="deptTree" :data="deptTreeData" :props="defaultProps" :highlight-current="true" accordion @node-click="handleNodeClick"></el-tree>
        </el-aside>
        <!-- 右侧内容 -->
        <el-main class="txl-right-wrapper">
            <!-- 部门标题 -->
            <div class="txl-dept-title">
                <!-- <el-input v-model="keywords" placeholder="快速搜索"></el-input> -->
                <span>{{deptTitle}}</span>
            </div>

            <!-- 部门详情 -->
            <el-table v-if="showDeptInfoTable" class="txl-table-width" :data="deptInfoTableData" :span-method="arraySpanMethod" border
                :show-header="false">
                <el-table-column prop="field1" label="列1">
                </el-table-column>
                <el-table-column prop="field2" label="列2">
                </el-table-column>
                <el-table-column prop="field3" label="列3">
                </el-table-column>
                <el-table-column prop="field4" label="列4">
                </el-table-column>
            </el-table>

            <!-- 用户列表 -->
            <el-table v-if="showUserTable" class="txl-table-width" :data="userTableData" border>
                <el-table-column type="index" width="50" label="序号">
                </el-table-column>
                <el-table-column v-for="(item, index) in userTableHeader" :key="index" :prop="item.prop" :width="item.width" :label="item.label">
                </el-table-column>
            </el-table>

            <!-- 部门列表 -->
            <el-table v-else :data="deptTableData" class="txl-table-width" border>
                <el-table-column type="index" width="50" label="序号">
                </el-table-column>
                <el-table-column prop="name" label="名  称">
                </el-table-column>
                <el-table-column prop="phone" label="办公电话">
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>
</template>

<script>
    import txlForm from "./txlForm.vue";
    import {
        getChildren
    } from '../../scripts/myUtil'

    export default {
        name: "txl",
        data: function () {
            return {
                keywords: "",
                deptTreeData: [],
                userTableData: [],
                deptTreeParent:[],
                deptTreeOriginData: [],
                deptTableData: [],
                showUserTable: true,
                showDeptInfoTable: false,
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                // 定义部门基本信息中的变量
                deptInfo: {
                    "汛期值班": "",
                    "汛期传真": "",
                    "非汛期值班": "",
                    "非汛期传真": "",
                    "邮政编码": "",
                    "电话区号": "",
                    "单位地址": "",
                    "电子邮箱": ""
                },
                deptTitle: '',
                userTableType: -1,
                userTableHeader: [],
                userTableAllHeader: [{
                    prop: "username",
                    label: "姓 名"
                }, {
                    prop: "job",
                    label: "行政职务"
                }, {
                    prop: "worknum",
                    label: "防汛职务"
                }, {
                    prop: "tel",
                    label: "办公电话"
                }, {
                    prop: "phone",
                    label: "手  机"
                }, {
                    prop: "office",
                    label: "科  室"
                }, {
                    prop: "area",
                    label: "水库名称"
                }, {
                    prop: "office",
                    label: "所在县"
                }, {
                    prop: "username",
                    label: "责任人"
                }, {
                    prop: "area",
                    label: "泵站名称",
                    width:"100"
                }, {
                    prop: "office",
                    label: "单位名称"
                }, {
                    prop: "office",
                    label: "乡镇办（处）"
                }],
                showSearchInput: false,
                searchText: '',
                // querySelect: 'user'
            };
        },
        components: {
            txlForm
        },
        mounted() {
            let that = this;
            this.$$http("GET_DEPT_LIST").then(data => {
                let result = getChildren(data);
                that.deptTreeOriginData = data;
                that.deptTreeParent=result;
                that.deptTreeData = result;

                // 默认设置为第一个部门
                setTimeout(function () {
                    let deptTree = that.$refs.deptTree;
                    // console.log(deptTree);
                    if (deptTree && deptTree.$children && deptTree.$children.length > 0) {
                        let firstVue = deptTree.$children[0];
                        firstVue.$el.click();
                    }
                }, 500);
            });
            this.userTableType = 0; // 默认设置
        },
        computed: {
            deptInfoTableData() {
                let deptInfo = this.deptInfo;
                return [{
                    field1: "汛期值班",
                    field2: deptInfo["汛期值班"],
                    field3: "汛期传真",
                    field4: deptInfo["汛期传真"]
                }, {
                    field1: "非汛期值班",
                    field2: deptInfo["非汛期值班"],
                    field3: "非汛期传真",
                    field4: deptInfo["非汛期传真"]
                }, {
                    field1: "邮政编码",
                    field2: deptInfo["邮政编码"],
                    field3: "电话区号",
                    field4: deptInfo["电话区号"]
                }, {
                    field1: "单位地址",
                    field2: deptInfo["单位地址"],
                }, {
                    field1: "电子邮箱",
                    field2: deptInfo["电子邮箱"],
                }];
            }
        },
        watch: {
            searchText(val){
                let that = this;
                var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
                var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
                var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
                var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
                if(isIE || isIE11) {
                    val = encodeURI(val);
                }
                this.$$http("GET_USER_ALL", [1,100,val]).then(data => {
                    console.log(data)
                    that.userTableData=data.rows;

                    //如果搜索不到人
                    if(that.userTableData==null||that.userTableData==''){
                        // 默认设置为第一个部门
                        let deptTree = that.$refs.deptTree;
                        console.log(deptTree);
                        if (deptTree && deptTree.$children && deptTree.$children.length > 0) {
                            let firstVue = deptTree.$children[0];
                            firstVue.$el.click();
                        }
                    }
                });

                if(val==''||val==null){
                    this.deptTreeData=this.deptTreeParent
                }else
                    this.deptTreeData = this.deptTreeOriginData.filter( item => (~item.name.indexOf(val)));
                
                

                
                // if(this.querySelect=='user'){
                //     this.$$http("GET_USER_ALL", [1,100,val]).then(data => {
                //         console.log(data)
                //        that.userTableData=data.rows;
                //     });
                // }else{
                //     this.deptTreeData = this.deptTreeOriginData.filter( item => (~item.name.indexOf(val)));
                    
                //     // 默认设置为第一个部门
                //     setTimeout(function () {
                //         let deptTree = that.$refs.deptTree;
                //         console.log(deptTree);
                //         if (deptTree && deptTree.$children && deptTree.$children.length > 0) {
                //             let firstVue = deptTree.$children[0];
                //             firstVue.$el.click();
                //         }
                //     }, 500);
                // }
            },
            userTableType(val) {
                let headerNums = [0, 1, 2, 3, 4];
                switch (val) {
                    case 1:
                        headerNums = [0, 1, 3, 4];
                        break;
                    case 2:
                        headerNums = [0, 1, 5, 3, 4];
                        break;
                    case 3: // 水库
                        headerNums = [6, 7, 8, 1, 3, 4];
                        break;
                    case 4: // 泵站
                        headerNums = [9, 7, 8, 1, 4];
                        break;
                    case 5: // 堤防
                        headerNums = [10, 7, 8, 1, 4];
                        break;
                    case 6: // 乡镇办
                        headerNums = [11, 3, 8, 1, 4];
                        break;
                    default:

                        break;
                }
                let userTableHeader = [];
                headerNums.forEach(index => {
                    userTableHeader.push(this.userTableAllHeader[index]);
                });
                this.userTableHeader = userTableHeader;
            }
        },
        methods: {
            queryBtnClick() {
                this.showSearchInput = true;
                let queryInput = this.$refs.queryInput;
                setTimeout(function () {
                    queryInput && queryInput.focus();
                }, 300);
            },
            handleNodeClick(data) {
                console.log(data);
                if (data.children) return;

                this.deptTitle = data.name;
                // 设置用户列表表头
                this.userTableType = data.userTableType || 0;

                let that = this;
                let type = data.name;
                if (data.isDept) { // 存在部门信息
                    if (data.isUser) { // 且存在用户列表
                        this.$$http("GET_USERS_BY_DEPT", encodeURI(type)).then(data => {
                            that.userTableData = data;
                            that.showUserTable = true;
                        });
                        this.$$http("GET_DEPTS_BY_DEPT", null, {
                            type: type
                        }).then(data => {
                            // 设置部门基本信息
                            let deptInfo = that.deptInfo;
                            data.forEach(item => {
                                if (item.name in deptInfo) {
                                    deptInfo[item.name] = item.phone;
                                }
                            });
                            that.showDeptInfoTable = true;
                        });
                    } else { // 没有用户列表
                        this.showDeptInfoTable = false;
                        this.$$http("GET_DEPTS_BY_DEPT", null, {
                            type: type
                        }).then(data => {
                            that.deptTableData = data;
                            that.showUserTable = false;
                        });
                    }
                } else { // 只存在用户列表
                    this.showDeptInfoTable = false;
                    this.$$http("GET_USERS_BY_DEPT", encodeURI(type)).then(data => {
                        that.userTableData = data;
                        that.showUserTable = true;
                    });
                }

            },
            arraySpanMethod({
                row,
                column,
                rowIndex,
                columnIndex
            }) {
                if (rowIndex > 2) {
                    if (columnIndex > 0) {
                        return [1, 3];
                    }
                }
            },
        }
    };
</script>

<style lang="scss">
    .txl-wrapper {
        height: 515px;

        .txl-left-wrapper {
            padding: 12px 15px;
            border-right: 1px solid #ccc;
        }

        .txl-left-tool {
            margin: 0 0 7px 10px; // padding-left: 10px;
            // font-size: 18px;
            // height: 27px;

            .searchInput {
                width: 200px;
                padding: 5px;
                box-sizing: border-box;
                border: 1px solid #eee;
                background-color: #fcfcfc;
                outline: 0;
            }

            .bounce-enter-active {
                animation: bounce-in .5s;
            }

            .bounce-leave-active {
                animation: bounce-in .5s reverse;
            }

            @keyframes bounce-in {
                0% {
                    width: 0px;
                }
                100% {
                    width: 200px;
                }
            }

            i {
                line-height: 27px;
            }

            i:hover {
                cursor: pointer;
            }
        }

        .el-icon-caret-right:before {
            content: none;
        }

        .txl-table-width .el-table__body-wrapper {
            width: calc(100% + 1px);
        }

        .txl-dept-title {
            font-size: 16px;
            font-weight: bold;
            margin: auto 0;
            text-align: center;
            margin-bottom: 10px;
        }
    }
</style>